<!-- 模板 -->
<template>
  <div class="finish">
       <el-card shadow="hover">
         <span>完成报名列表</span>
         <div style="margin-top:10px">
           <el-select v-model="params1.name" placeholder="请选择分类"  filterable @change="search1">
                  <el-option
                  v-for="item in classOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                  </el-option>
              </el-select> 
         </div>
        <el-table
          style="margin-top:20px"
          v-loading="loading"
          :data="tableData"
          border
          class="table"
          ref="multipleTable"
          header-cell-class-name="table-header"
        >
          <el-table-column type="index" label="编号" align="center" />
           <!-- <el-table-column
            prop="realName"
            label="姓名"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true">
            </el-table-column> -->
            <el-table-column
            label="头像"
            min-width="150"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="showUrl+scope.row.url" alt="" width="80" height="80">
            </template>
          </el-table-column>
          <el-table-column
            prop="realName"
            label="姓名"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="identityCard"
            label="身份证号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <template v-for="(item, index) in tableHead">
            <el-table-column align="center" :label="item.name" :key="index" :show-overflow-tooltip="true" min-width="130">
              <template slot-scope="scope">
                {{ scope.row[item.mesName]}}
              </template>
            </el-table-column>
          </template>

          <el-table-column
            prop="payMoney"
            label="金额"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="支付方式" align="center" min-width="150">
            <template slot-scope="scope">
              <span>
                {{ scope.row.payment == 3?"代缴":scope.row.payment == 2?"支付宝":scope.row.payment == 1?'微信':scope.row.payment == 4?'对公转账':'' }}
              </span>
            </template>
          </el-table-column>
           <!-- <el-table-column
            prop="identityCard"
            label="身份证号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="certificateName"
            label="报名项目"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="education"
            label="学历"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="location"
            label="常驻地"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="title"
            label="职称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="companyName"
            label="供职单位名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="duties"
            label="职务"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
           <el-table-column
            prop="payMoney"
            label="价格"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="状态" align="center" min-width="150">
            {{status}}
          </el-table-column>
          <el-table-column
            prop="payMoney"
            label="金额"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column label="支付方式" align="center" min-width="150">
            <template slot-scope="scope">
               {{ scope.row.payment == 3?"代缴":scope.row.payment == 2?"支付宝":scope.row.payment == 1?'微信':scope.row.payment == 4?'对公转账':'' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="报名时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="是否需要发票" align="center" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.invoiceStatus == 0?"不需要":scope.row.invoiceStatus == 1?"需要":'' }}</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="name"
            label="公司名称"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="invoiceAmount"
            label="订单金额"
            align="center"
            min-width="150" 
          ></el-table-column>
          <el-table-column
            prop="dutyParagraph"
            label="税号"
            align="center"
            min-width="150"
             :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop=" invoiceAddress"
            label="邮寄地址"
            align="center"
            min-width="150"
             :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="invoiceRemark"
            label="发票备注"
            align="center"
            min-width="150"
             :show-overflow-tooltip="true"
          ></el-table-column> -->
          <el-table-column
            label="操作"
            min-width="250"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="chakan(scope.row)"
                >查看</el-button>
                <el-button
                type="text"
                icon="el-icon-delete"
                @click="shanchu(scope.row)"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <div >
      <pagination
        v-show="pageTotal > 0"
        :total="pageTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getData00"
      />
    </div>

        <!-- <el-dialog :title=title :visible.sync="open" width="50%">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="头像" prop="headPortrait">
                  <el-upload
                    :headers="headers"
                    :action="`${baseUrl}/goods/goods/upload`"
                    :show-file-list="false"
                    :on-success="uploadPicUrl"
                    class="avatar-uploader"
                  >
                    <img v-if="form.headPortrait" :src="showUrl + form.headPortrait" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
        <el-col :span="12">
              <el-form-item label="证书" prop="remarks">
                  <el-image  class="avatar" :src="showUrl +form.certificatePic"  :preview-src-list="[showUrl +form.certificatePic]"> </el-image>
              </el-form-item>
             </el-col>
        </el-row>
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="身份证号" prop="identityCard">
                <el-input v-model="form.identityCard"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
                <el-form-item label="报名项目"  prop="certificateName" >
                <el-input v-model="form.certificateName"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="学历" prop="education">
                <el-input v-model="form.education"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="常驻地" prop="location">
                <el-input v-model="form.location" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职称" prop="title">
                <el-input v-model="form.title" ></el-input>
              </el-form-item>
             </el-col>
        <el-col :span="12">
              <el-form-item label="供职单位名称 " prop="companyName">
                <el-input v-model="form.companyName" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职务" prop="duties">
                <el-input v-model="form.duties" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="价格/元" prop="payMoney">
                <el-input v-model="form.payMoney" ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" >
                <el-input v-model="status" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="金额" >
                <el-input-number disabled v-model="form.payMoney"></el-input-number>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="支付方式"  prop="payment">
                <el-input v-model="form.payment" ></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="支付订单号" prop="orderSn">
                <el-input v-model="form.orderSn"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="报名时间" prop="certificationDate" >
                <el-date-picker
                  v-model="form.createTime"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="支付时间" prop="payTime"  >
                <el-date-picker
                  v-model="form.payTime"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
            </el-col>
        </el-row>
              <el-form-item label="完成时间" prop="updateTime">
                <el-date-picker
                  v-model="form.updateTime"
                  type="date"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
      </el-form>
    </el-dialog> -->
  
  <!-- 查看弹窗 -->
    <el-dialog :title=title :visible.sync="open" width="45%">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="头像" prop="headPortrait">
                  <el-upload
                    :headers="headers"
                    :action="`${baseUrl}/goods/goods/upload`"
                    :show-file-list="false"
                    :on-success="uploadPicUrl"
                    class="avatar-uploader"
                  >
                    <img v-if="form.url" :src="showUrl + form.url" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
        <el-col :span="12">
              <el-form-item label="证书" prop="remarks">
                  <el-image  class="avatar" :src="showUrl +form.certificatePic"  :preview-src-list="[showUrl +form.certificatePic]"> </el-image>
              </el-form-item>
             </el-col>
        </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="身份证号" prop="identityCard">
                <el-input v-model="form.identityCard"></el-input>
              </el-form-item>
            </el-col>
        </el-row>
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone"></el-input>
              </el-form-item>
            </el-col>
        <el-col :span="12">
              <el-form-item label="选择类型" >
              <el-select v-model="form.type" placeholder="请选择分类"  filterable @change="handleClass" style="width:230px">
                      <el-option
                      v-for="(item,index) in classOptions1"
                      :key="index"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select> 
            </el-form-item>
          </el-col>
        </el-row>
        <div v-for="(item, index) in bjForm" :key="index">
              <el-form-item :label="item.name" v-show="item.inputType == '输入框'" >
                  <el-input v-model="form[item.mesName]" :placeholder=placTitle+item.name clearable style="width:230px"></el-input>
              </el-form-item>
                

                  <el-form-item :label="item.name" v-show="item.inputType == '日期'">
                     <el-date-picker v-model="form[item.mesName]"  value-format="yyyy-MM-dd " type="date" placeholder="选择日期" ></el-date-picker>
                  </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '多选'">
                  <el-checkbox-group v-model="form[item.mesName]">
                    <el-checkbox :label="item1.optiones" v-for="(item1,index1) in item.optionList" :key="index1">{{item1.optiones}}</el-checkbox>
                  </el-checkbox-group>
               </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '单选'" >
                  <el-radio v-model="form[item.mesName]" :label="item2.optiones" v-for="(item2,index2) in item.optionList" :key="index2">{{item2.optiones}}</el-radio>
               </el-form-item>

               <el-form-item :label="item.name" v-show="item.inputType == '字典表'"  >
                    <el-select v-model="form[item.mesName]" :placeholder=placTitle1+item.name style="width: 55%;"  multiple   @change="((val)=>{changeName(val,item)})">
                        <el-option
                          v-for="item2 in item.sysDictData" 
                          :key="item2.dictLabel"
                          :label="item2.dictLabel" 
                          :value="item2.dictLabel">
                        </el-option>
                    </el-select> 
                </el-form-item>
        </div>
        <el-form-item label="金额" >
                  <el-input-number v-model="form.payMoney" disabled></el-input-number>
        </el-form-item>
        <el-form-item label="发证日期" prop="certificationDate">
                <el-date-picker
                  v-model="form.certificationDate"
                  type="date"
                  value-format="yyyy-MM-dd "
                  placeholder="选择日期">
                  </el-date-picker>
              </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="showBtn">
        <el-button @click="openqx">取 消</el-button>
        <el-button type="primary" @click="okopen">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {queryorder_school,delorder_school,getRegistration,getClassList1,getQueryName,getRegistrationXq,getUp,delReg} from "@/api/order/orderschool";
import { getToken } from "@/utils/auth";

export default {
  name: '',
  data () {
    return {
      loading: true,
      headers: { Authorization: "Bearer " + getToken() },
      baseUrl: process.env.VUE_APP_BASE_API,
      //数据
      tableData: [],
      options:[],
      title:"",
      params: {
        pageNum: 1,
        pageSize: 10,
       examineStatus:4,
       state:3,
       type:undefined,
      },
      params1: {
        pageNum: 1,
        pageSize: 10,
        state:3,
        name:'',
      },
      pageTotal: 0,
      form:{},
      status:"已支付",
      open:false,
      showOpen:true,
      showBtn:true,
      rules:{},
      classOptions:[],
      classOptions1:[],
      tableHead:[],
      bjForm:[],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    handleClass(val){
          let that = this
      // console.log(val);
      getQueryName(val).then(res =>{
        if(res.code == 200){
          // console.log(res);
          that.bjForm = res.data
          //  console.log(that.form);
          for (let i = 0; i < that.bjForm.length; i++) {
            if(that.bjForm[i].dictType == 'sys_enter'){
              that.options1 = that.bjForm[i].sysDictData
            }
            if(that.bjForm[i].inputType == '日期'){
              console.log(123);
              that.$nextTick(res =>{
              that.form[that.bjForm[i].mesName] = ''
              })
            }
          }
        }
      })
    },
    getziduan(){
      getQueryName(this.params.type).then(res =>{
        if(res.code == 200){
          // console.log(res);
          this.tableHead = res.data
          console.log(this.tableHead);
        }
      })
    },
     //   获取分类
    getClsss(){
        getClassList1().then(res => {
            // console.log(res);
            this.classOptions = res.data
            this.classOptions1 = res.data
            this.params1.name = res.data[0].name
            this.params.type = res.data[0].id
            this.getData00()
            this.getziduan()
            });
    },
    // 删除按钮
    shanchu(row){
      const id = row.id 
       this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          // return delorder_school(id);
          let data = {
            id:id
          }
          delReg(data).then(res => {
            if(res.code == 200){
              console.log(res);
            }
          })
        })
        .then(() => {
          this.getData00();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
        // 弹窗取消按钮
    openqx(){
      this.open = false
      this.getData00()
    },
    // 提交按钮
    // okopen(){
    //   this.form.certificateName = this.form.certificateName.toString()
    //   this.form.examineStatus = 4
    //    if(this.form.payment == "微信"){
    //     this.form.payment = 1
    //   }else if(this.form.payment == "支付宝"){
    //     this.form.payment = 2

    //   }else if(this.form.payment == "代缴"){
    //     this.form.payment = 3
    //   }
    //   // console.log(this.form);
    //   this.$refs["form"].validate(valid => {
    //     if (this.form.id != undefined) {
    //               nijisiai1(this.form).then(res=>{
    //                   if(res.code == 200){
    //                       this.$message.success('编辑成功')
    //                       this.open = false
    //                       this.getData00()
    //                   }
    //               })
    //             } else {
    //               nijisiai(this.form).then(res=>{
    //                   // console.log(res,'。。。。。。。。。')
    //                   if(res.code == 200){
    //                       this.$message.success('添加成功')
    //                       this.open = false
    //                       this.getData00()
    //                   }
    //               })
    //             }
    //   });
    // },
    uploadPicUrl(res){
        // console.log(res.data)
        this.form.headPortrait = res.data
    },
    search1(val){
      this.params.type = val
      this.getData00()
      this.getziduan()
      // console.log(val);
    },
    // 选择报名项目
    changeName(val){
      if(val.length == 1){
        // console.log(val)
        for (let i = 0; i < this.options.length; i++) {
          if(val == this.options[i].dictLabel){
            this.form.payMoney = this.options[i].dictValue
          }
          
        }
      }else  if(val.length < 1){
        this.form.payMoney = 0
      }else{
            let sum = 0
        for (let i = 0; i < this.options.length; i++) {
          for (let j = 0; j < val.length; j++) {
            if(val[j] == this.options[i].dictLabel){
              sum = Number(this.options[i].dictValue) + sum
              this.form.payMoney = sum
            }
          }
          
        }
      }
    },
    // 编辑按钮
    // bianji(row){
    //   this.title= "修改"
    //   this.showOpen = true
    //   this.showBtn = true
    //   this.form = JSON.parse(JSON.stringify(row))
    //   this.form.certificateName = row.certificateName.split(',')
    //   if(this.form.payment ==1){
    //     this.form.payment = "微信"
    //   }else if(this.form.payment ==2){
    //     this.form.payment = "支付宝"

    //   }else if(this.form.payment ==3){
    //     this.form.payment = "代缴"
    //   }
    //   this.open = true
    // },
    // 查看按钮
    chakan(row){
      this.title= "查看"
      this.showBtn = false
      this.showOpen = false
      this.form = JSON.parse(JSON.stringify(row))
      if(this.form.payment ==1){
        this.form.payment = "微信"
      }else if(this.form.payment ==2){
        this.form.payment = "支付宝"

      }else if(this.form.payment ==3){
        this.form.payment = "代缴"
      }else if(this.form.payment == 4){
        this.form.payment = '对公转账'
      }
      getQueryName(row.type).then(res => {
        if(res.code == 200){
          this.bjForm = res.data
        }
      })
      getRegistrationXq(row.id).then(res =>{
        if(res.code == 200){
          // console.log(res);
          this.form = res.data
          for (let i = 0; i < res.data.mesList.length; i++) {
            if(res.data.mesList[i].mesType == '字典表' || res.data.mesList[i].mesType == '多选'){
              this.form[res.data.mesList[i].mesName] =  res.data.mesList[i].mesValue.split(',')
              console.log( this.form[res.data.mesList[i].mesName]);
            }
            
          }
        }
      })
      this.open = true
    },
     //获取列表
    getData00() {
      // console.log(this.params);
      // queryorder_school(this.params).then(res => {
      //   console.log(res, "待审核证书");
      //   if (res.code == 200) {
      //     this.tableData = res.rows;
      //     this.pageTotal = res.total;
      //     this.loading = false;
      //   }
      // });
      getRegistration(this.params).then(res => {
        // console.log(res, "待审核证书");
        if (res.code == 200) {
        this.tableData = res.rows
        this.pageTotal = res.total;
        this.loading = false;
        }
      });
    },
  },
  created () {
    // this.getData00()
    this.getClsss()
    // this.getDicts('sys_enter').then(res=>{
    //     // console.log(res,'报名项目')
    //     this.options = res.data
    // })
  },
  mounted () {}
}
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .el-image-viewer__img{
    margin-top: 280px !important;
  }
</style>
<style  scoped>
.finish {
  padding: 20px 30px;
}
</style>
